<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .loading {
            margin: 50px;
            width: 50px;
            height: 50px;
            animation: rotate 2s linear 0s infinite;
        }
        .path {
            animation: dash 2s ease-in-out infinite;
            stroke: #00b390;
            stroke-width: 2;
            stroke-dasharray: 90,150;
            stroke-dashoffset: 0;
            stroke-linecap: round;
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes dash {
            0% {
                stroke-dasharray: 1,150;
                stroke-dashoffset: 0;
            }
            50% {
                stroke-dasharray: 90,150;
                stroke-dashoffset: -40px;
            }
            100% {
                stroke-dasharray: 90,150;
                stroke-dashoffset: -120px;
            }
        }
    </style>
</head>
<body>
<!--    loading动画-->
    <div>
        <svg class="loading" viewBox="25 25 50 50">
            <circle cx="50" cy="50" r="25" class="path" fill="#fdd" />
        </svg>
    </div>
<!--圆形-->
<div>
    <svg xmlns="http://www.w3.org/2000/svg" height="500px" width="500px" version="1.1">
        <circle cx="200" cy="100" r="50" stroke="#afeedd"
                stroke-width="5" fill="#f0ddff" />
    </svg>
</div>
<!--矩形-->
    <div>
        <svg height="500px" width="500px" version="1.1">
            <rect x="50" y="100" width="300" height="150" style="fill:rgb(145,245,255);stroke-width:5;stroke:#EE799F;fill-opacity:0.9;stroke-opacity:0.9;"/>
        </svg>
    </div>
<!--多边形-->
    <div>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px">
            <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:#B4EEB4;stroke:#DB7093   ;stroke-width:3;fill-rule:nonzero;"/>
        </svg>
    </div>
<!--模糊-->
    <div>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
            <defs>
                <filter id="keai" x="0" y="0">
                    <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
                </filter>
            </defs>
            <rect width="150" height="100" stroke="red" stroke-width="5"
                  fill="#7EC0EE" filter="url(#keai)" />
        </svg>
    </div>
<!--阴影-->
    <div>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px">
            <defs>
                <filter id="myImg" x="0" y="0" width="200%" height="200%">
                    <feOffset result="offOut" in="SourceGraphic" dx="10" dy="10" />
                    <feColorMatrix result = "matrixOut" in = "offOut" type = "matrix" values = "0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0"/>
                    <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
                    <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
                </filter>
            </defs>
            <rect width="200" height="200" stroke="#90EE90" stroke-width="5" fill="#FFEFDB" filter="url(#myImg)" />
        </svg>
    </div>
<!--渐变-->
    <div>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px">
            <defs>
                <linearGradient id="yuan" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" style="stop-color:rgb(238,210,238);stop-opacity:1" />
                    <stop offset="100%" style="stop-color:rgb(255,250,205);stop-opacity:1" />
                </linearGradient>
            </defs>
            <ellipse cx="200" cy="200" rx="150" ry="80" fill="url(#yuan)" />
        </svg>
    </div>
</body>
</html>